
<!-- self_media_news_aggregator/frontend/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>自媒体新闻聚合器</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.loli.net/css?family=Noto+Sans+SC:400,500,700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .news-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .tag-cloud span {
            transition: all 0.2s ease;
        }
        .tag-cloud span:hover {
            transform: scale(1.1);
        }
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
    </style>
</head>
<body class="text-gray-800">
    <div id="particles-js"></div>
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8 text-center">
            <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">自媒体新闻聚合器</h1>
            <p class="text-gray-600 mt-2">汇聚全网优质自媒体内容</p>
        </header>

        <div class="flex flex-col lg:flex-row gap-8">
            <aside class="lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6 sticky top-4">
                    <h2 class="text-xl font-semibold mb-4">分类导航</h2>
                    <div class="tag-cloud flex flex-wrap gap-2">
                        <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full cursor-pointer">全部</span>
                        <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full cursor-pointer">科技</span>
                        <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full cursor-pointer">娱乐</span>
                        <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full cursor-pointer">财经</span>
                        <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full cursor-pointer">体育</span>
                        <span class="px-3 py-1 bg-pink-100 text-pink-800 rounded-full cursor-pointer">健康</span>
                    </div>

                    <div class="mt-8">
                        <h3 class="text-lg font-medium mb-3">热门标签</h3>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm">#人工智能</span>
                            <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm">#元宇宙</span>
                            <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm">#新能源汽车</span>
                            <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm">#区块链</span>
                        </div>
                    </div>
                </div>
            </aside>

            <main class="lg:w-3/4">
                <div class="mb-6 flex justify-between items-center">
                    <h2 class="text-2xl font-bold">最新资讯</h2>
                    <div class="relative">
                        <input type="text" placeholder="搜索新闻..." class="pl-10 pr-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <svg class="w-5 h-5 text-gray-400 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                </div>

                <div id="news-container" class="grid md:grid-cols-2 gap-6">
                    <!-- 新闻卡片将通过JS动态加载 -->
                </div>

                <div class="mt-8 text-center">
                    <button id="load-more" class="px-6 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition">加载更多</button>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script src="js/newsData.js"></script>
    <script src="js/app.js"></script>
    <script>
        // 粒子效果初始化
        particlesJS('particles-js', {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: "#3B82F6" },
                shape: { type: "circle" },
                opacity: { value: 0.5, random: true },
                size: { value: 3, random: true },
                line_linked: { enable: true, distance: 150, color: "#3B82F6", opacity: 0.4, width: 1 },
                move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "grab" },
                    onclick: { enable: true, mode: "push" }
                }
            }
        });
    </script>
</body>
</html>
